<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>档案管理</title>
    <link rel="stylesheet" href="assets/lib/iview/iview.css">
    <link rel="stylesheet" href="assets/lib/cropper/cropper.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet"type="text/css" href="assets/css/print.css" media="print"/>
    <script src="assets/lib/jquery/jquery.min.js"></script>
    <script src="assets/lib/iview/vue.min.js"></script>
    <script src="assets/lib/iview/iview.js"></script>
    <script src="assets/lib/cropper/cropper.min.js"></script>
    <script src="assets/js/db.js"></script>
    <script src="assets/js/cookie.js"></script>
    <script src="assets/js/jquery.jqprint-0.3.js"></script>
    <script>
        function checkLogin(){
            var tmp=Cookies.get('access');
            if(tmp!='ok'){
                top.location='login.html';
            }
        }
        //checkLogin();
    </script>
</head>

<body>
    <div id="app">
        <div class="layout">
            <layout>
                <i-header>
                    <i-menu mode="horizontal" theme="primary" @on-select="onLogout">
                        <div class="layout-logo">
                            <Icon type="person-stalker"></Icon>
                            <span>人员档案管理程序</span>
                        </div>
                        <div class="layout-nav">
                            <menu-item name="1"><Icon type="ios-navigate"></Icon>退出 </menu-item>
                        </div>
                    </i-menu>
                </i-header>
                <i-content>
                    <div class="operator">
                        <div class="operator-search">
                            <i-input v-model="keyword">
                                <span slot="prepend">姓名：</span>
                                <i-button slot="append" icon="ios-search" @click="onSearch(1)"></i-button>
                            </i-input>
                        </div>
                        <div class="operator-insert">
                            <i-button type="info" icon="plus" @click="onCreate">添加</i-button>
                        </div>
                    </div>
                    <i-table border :columns="columns" :data="persons"></i-table>
                    <div>
                        <Page :total="pager.total" :current="pager.current" :page-size="pager.size" @on-change="onSearch"></Page>
                    </div>
                </i-content>
                <i-footer class="layout-footer-center">2011-2016 &copy; TalkingData</i-footer>
            </layout>
        </div>
        <Modal v-model="modal.visible" title="编辑人员信息" width="600" :mask-closable="false">
            <i-form ref="person" :model="person" :rules="ruleValidate" :label-width="50">
                <table class="form-table">
                    <tbody>
                        <tr>
                            <td>
                                <form-item label="姓名" prop="name">
                                    <input type="hidden" v-model="person.id" />
                                    <i-input v-model="person.name" placeholder="请输入姓名"></i-input>
                                </form-item>
                            </td>
                            <td rowspan="4" class="imgTd">
                                <input ref="file" type="file" id="file" :accept="imgCropperData.accept" style="display:none;" @change="onFileChange" />
                                <img :src="person.photo" @click="onSelectPhoto" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <form-item label="性别">
                                    <radio-group v-model="person.gender">
                                        <Radio label="男">男</Radio>
                                        <Radio label="女">女</Radio>
                                    </radio-group>
                                </form-item>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <form-item label="电话" prop="phone">
                                    <i-input v-model="person.phone" placeholder="请输入电话"></i-input>
                                </form-item>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <form-item label="职务">
                                    <i-select v-model="person.job">
                                        <i-option value="主任">主任</i-option>
                                        <i-option value="副主任">副主任</i-option>
                                        <i-option value="组员">组员</i-option>
                                    </i-select>
                                </form-item>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <form-item label="单位">
                                    <i-input v-model="person.workUnit" placeholder="请输入事奉单位"></i-input>
                                </form-item>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <form-item label="地址">
                                    <i-input v-model="person.address" placeholder="请输入联系地址"></i-input>
                                </form-item>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <form-item label="简历">
                                    <i-input type="textarea" v-model="person.resume" placeholder="请输入简要说明" :rows="6"></i-input>
                                </form-item>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </i-form>
            <div slot="footer">
                <i-button type="text" size="large" @click="onCancel">取消</i-button>
                <i-button type="text" size="large" @click="onPrint">打印</i-button>
                <i-button type="primary" size="large" :loading="modal.loading" @click="onSave">提交</i-button>
            </div>
        </Modal>
        <Modal v-model="modal.photoVisible" title="编辑人员照片" width="600" :mask-closable="false" @on-ok="onCroppedCanvas">
            <div class="container">
                <div id="myCropper-workspace">
                    
                </div>
            </div>
            <div class="avatar-preview">

            </div>
        </Modal>
        <div id="printArea">
            <table class="form-table">
                <tbody>
                    <tr>
                        <th>姓名</th>
                        <td>{{person.name}}</td>
                        <td rowspan="4" class="imgTd"><img :src="person.photo" /></td>
                    </tr>
                    <tr>
                        <th>性别</th>
                        <td>{{person.name}}</td>
                    </tr>
                    <tr>
                        <th>电话</th>
                        <td>{{person.phone}}</td>
                    </tr>
                    <tr>
                        <th>职务</th>
                        <td>{{person.job}}</td>
                    </tr>
                    <tr>
                        <th>单位</th>
                        <td colspan="2">{{person.workUnit}}</td>
                    </tr>
                    <tr>
                        <th>地址</th>
                        <td colspan="2">{{person.address}}</td>
                    </tr>
                    <tr>
                        <th>简历</th>
                        <td class="resume" colspan="2">{{person.resume}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>

        var app = new Vue({
            el: "#app",
            data: {
                keyword: '',
                rowIndex: 0,
                imgObj:'',
                imgCropperData: {src:'',accept: 'image/gif, image/jpeg, image/png, image/bmp'},
                modal: { visible: false, loading: false, photoVisible: false },
                pager: { size: 25, total: 0, current: 1 },
                columns: [
                    { title: '姓名', key: 'name', width: 120 },
                    { title: '性别', key: 'gender', width: 80 },
                    { title: '电话', key: 'phone', width: 150 },
                    { title: '职务', key: 'job', width: 120 },
                    { title: '地址', key: 'address' },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            app.onEdit(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            app.onDelete(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                persons: [],
                person: { name: '', phone: '13', photo: 'assets/photo/photo.png', gender: '男', address: '', job: '组员', workUnit: '', resume: '' },
                ruleValidate: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入联系电话', trigger: 'blur' },
                    ],
                    resume: [
                        { type: 'string', max: 100, message: '简历不能超过100个字符', trigger: 'blur' }
                    ]
                }
            },
            mounted: function () {
                var that = this;
                dataBase.openDB(function () {
                    that.onSearch();
                });
            },
            methods: {
                create: function () {
                    return { name: '', phone: '13', photo: 'assets/photo/photo.png', gender: '男', address: '', job: '组员', workUnit: '', resume: '' };
                },
                onSave: function () {
                    this.$refs['person'].validate((valid) => {
                        this.modal.loading = true;
                        if (valid) {
                            this.$Message.success('修改成功');
                            var that = this;
                            dataBase.saveData(this.person, function (id) {
                                if (!that.person.id) {
                                    that.person.id = id;
                                    that.persons.push(that.person);
                                }
                                /* else {
                                    that.persons.splice(that.rowIndex, 1, Object.assign({}, that.person));
                                }*/
                            });
                        }
                        this.modal.loading = false;
                        this.modal.visible = !valid;
                    })
                },
                onCreate: function () {
                    this.modal.visible = true;
                    this.person = this.create();
                },
                onEdit: function (index) {
                    this.rowIndex = index;
                    this.person = this.persons[index];
                    this.modal.visible = true;
                },
                onDelete: function (index) {
                    this.persons.splice(index, 1);
                    dataBase.deleteOneData(this.persons[index].id);
                },
                onCancel: function () {
                    this.modal.visible = false;
                },
                onSearch: function (index) {
                    this.pager.current = index ? index : 1;
                    var that = this;
                    dataBase.search(this.keyword, function (data) {
                        var t = data.length;
                        that.pager.total = t;
                        var s = that.pager.size * (that.pager.current - 1);
                        var e = that.pager.size * that.pager.current;
                        e = e > t ? t : e;
                        s = s > e ? e : s;
                        that.persons = [];
                        for (; s < e; s++) {
                            that.persons.push(data[s]);
                        }
                        //that.persons = data;
                    });
                },
                onFileChange:function(){
                    var file=this.$refs["file"].files[0];
                    if(this.imgCropperData.accept.indexOf(file.type)==-1){
                        this.$Modal.error({title:'格式错误',content:'您选择的图片格式不正确！'});
                        return;
                    }
                    if(file.size>5242880){
                        this.$Modal.error({title:'超出限制',content:'您选择的图片过大，请选择5MB以内的图片！'});
                        return;
                    }
                    this.imgCropperData.src = URL.createObjectURL(file);
                    this.initCropper();
                },
                initCropper:function(){
                    this.imgObj =  $('<img src="' + app.imgCropperData.src + '">');
                    var $avatarPreview = $('.avatar-preview');
                    $('#myCropper-workspace').empty().html(this.imgObj);
                    this.imgObj.cropper({//这里是给img 即被裁剪的图片进行参数配置
                        aspectRatio: 240 / 272,//裁剪框的比例
                        autoCrop:false,
                        preview: $avatarPreview,//预览的容器
                        autoCropArea: 0.9,//初始化裁剪框大小（相对于图片大小做比例）
                        movable: false,//是否能移动裁剪框（这里是可以移动图片 裁剪框处于不动的状态 按你的需求设置）
                        dragCrop: false,//不允许重新开裁剪框
                        resizable: false,//不允许改变裁剪框大小
                        ready: function () {
                            app.imgObj.cropper('crop');
                            app.imgObj.cropper('setData', {
                                width: 240,
                                height: 272
                            });
                        }
                    });
                    this.imgObj.on('cropend', function (e) {
                        var data = app.imgObj.cropper('getData');
                        if (data.width != 240 || data.height != 272) {
                            app.imgObj.cropper('setData', {
                                width: 240,
                                height: 272
                            });
                        }
                    });

                    this.modal.photoVisible=true;
                },
                onCroppedCanvas:function(){
                    var $imgData = this.imgObj.cropper('getCroppedCanvas')
                    var imgBase64Data = $imgData.toDataURL('image/png'); 
                    debugger;
                    this.person.photo=imgBase64Data;
                    //释放对象
                    this.imgObj.cropper('destroy');
                    this.imgObj=null;
                    $('#myCropper-workspace').empty()
                },
                onSelectPhoto: function () {
                    this.$refs["file"].value="";
                    $("#file").click();
                },
                onLogout:function(){
                    Cookies.set('access', 'no');
                    top.location.href='login.html';
                },
                onPrint:function(){
                    var w=$(document).height();
                    $(".resume").height(w-280);
                    $("#printArea").jqprint();
                }
            }
        });



    </script>
</body>

</html>